<template>
  <footer class="site-footer">
    <div class="footer-container">
      <div class="footer-content">
        <div class="footer-links">
          <div class="links-column">
            <h4>新手上路</h4>
            <ul>
              <li><a href="#">常见问题</a></li>
              <li><a href="#">会员介绍</a></li>
              <li><a href="#">购物流程</a></li>
              <li><a href="#">联系客服</a></li>
            </ul>
          </div>
          <div class="links-column">
            <h4>入驻合作</h4>
            <ul>
              <li><a href="#">商家入驻</a></li>
              <li><a href="#">开放平台</a></li>
            </ul>
          </div>
          <div class="links-column">
            <h4>商家服务</h4>
            <ul>
              <li><a href="#">商家中心</a></li>
              <li><a href="#">规则中心</a></li>
              <li><a href="#">达人中心</a></li>
              <li><a href="#">杰杰商学院</a></li>
            </ul>
          </div>
          <div class="links-column">
            <h4>关于小杰</h4>
            <ul>
              <li><a href="#">关于我们</a></li>
              <li><a href="#">联系我们</a></li>
            </ul>
          </div>
          <div class="links-column">
            <h4>消费者服务</h4>
            <ul>
              <li><a href="#">消费者保障</a></li>
              <li><a href="#">意见反馈</a></li>
              <li><a href="#">廉正举报</a></li>
            </ul>
          </div>
        </div>
        <div class="footer-social">
          <div class="qr-row">
            <div class="qr-code">
              <img src="@/assets/abc.jpg" alt="QR Code App">
              <span>阿杰APP</span>
            </div>
            <div class="qr-code">
              <img src="@/assets/abc.jpg" alt="QR Code WeChat">
              <span>微信公众号</span>
            </div>
          </div>
          <div class="assurance">
            <img src="@/assets/abc.jpg" alt="Assurance">
             <div>
                <h4>放心出行 保障有我</h4>
                <span>亿级保障金为用户出行保驾护航</span>
             </div>
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        <div class="corp-links">
          <a href="#">阿里巴巴集团</a><b>|</b>
          <a href="#">淘宝网</a><b>|</b>
          <a href="#">天猫</a><b>|</b>
          <a href="#">聚划算</a><b>|</b>
          <a href="#">全球速卖通</a><b>|</b>
          <a href="#">阿里巴巴国际交易市场</a><b>|</b>
          <a href="#">1688</a><b>|</b>
          <a href="#">阿里妈妈</a><b>|</b>
          <a href="#">小杰</a><b>|</b>
          <a href="#">阿里云计算</a><b>|</b>
          <a href="#">AliOS</a><b>|</b>
          <a href="#">万网</a><b>|</b>
          <a href="#">高德</a><b>|</b>
          <a href="#">优酷</a><b>|</b>
          <a href="#">土豆</a><b>|</b>
          <a href="#">阿里健康</a>
        </div>
        <div class="legal-info">
          <span>增值电信业务经营许可证： <a href="#">火星a2-20150952</a></span>
          <span>网络文化经营许可证：<a href="#">火网文[2019]0278-023号</a></span>
          <a href="#">银河系公安安备 5555555555号</a>
        </div>
        <div class="copyright">
          <span>© 1-2099 XiaoJie.com 版权所有</span>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'Footer'
}
</script>

<style scoped>
.site-footer {
  background-color: #fff;
  color: #888;
  font-size: 12px;
  padding: 30px 0;
  border-top: 1px solid #f0f0f0;
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto;
}

.footer-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
  padding-bottom: 25px;
  border-bottom: 1px solid #f0f0f0;
}

.footer-links {
  display: flex;
  gap: 60px;
}

.links-column h4 {
  font-size: 13px;
  color: #333;
  margin: 0 0 12px 0;
  font-weight: 600;
}

.links-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.links-column li {
  margin-bottom: 8px;
}

.links-column a {
  color: #888;
  text-decoration: none;
}

.links-column a:hover {
  text-decoration: underline;
  color: #ff6600;
}

.footer-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.qr-row {
  display: flex;
  gap: 15px;
  text-align: center;
}

.qr-code img {
  width: 80px;
  height: 80px;
}

.qr-code span {
  display: block;
  margin-top: 5px;
}

.assurance {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 8px;
    background-color: #f0f8ff;
    padding: 8px;
    border: 1px solid #e6f2ff;
    border-radius: 6px;
}

.assurance img {
    width: 35px;
    height: 35px;
}

.assurance h4 {
    margin: 0 0 4px 0;
    color: #007bff;
    font-size: 12px;
}

.assurance span {
    font-size: 11px;
    color: #555;
}

.footer-bottom {
  padding-top: 15px;
  color: #aaa;
  text-align: center;
}

.corp-links {
  margin-bottom: 15px;
  line-height: 1.8;
}

.corp-links a, .legal-info a {
  color: #aaa;
  text-decoration: none;
  margin: 0 5px;
}
.corp-links b {
    color: #ddd;
    margin: 0 5px;
    font-weight: normal;
}

.legal-info span, .legal-info a {
    margin-right: 15px;
}

.corp-links a:hover, .legal-info a:hover {
  text-decoration: underline;
}

.copyright {
  margin-top: 15px;
}
</style> 